<template>
<!--pages/user_bill/user_bill.wxml-->
<!-- class="user-bill" -->
<view >
	
		<view v-for="(item,index) in lists" :key="index">
			<view class="item1 ">
				<view class="flex-row-space-between">
					<view class="leftTitle">
					{{item.source_type}}
					</view>
					<view class="rightTitle">
					{{item.change_amount}}
					</view>
				</view>
				<view class="flex-row-space-between">
					<view class="leftTitle1">
						{{item.create_time}}
					</view>
					<!-- <view class="rightTitle1">
					提现中
					</view> -->
				</view>
				<view style="margin-top: 20rpx;" v-if="item.remark" class=" leftTitle">备注：{{ item.remark }}</view>
				
			</view>
		</view>
	
		    <view v-if='!lists.length' class="data-null column-center" slot="empty">
		        <image class="img-null" src="/static/images/order_null.png" />
		        <text class="nr muted">暂无支出记录～</text>
		    </view>
	

   <!-- <tabs 
      :active="active" 
      line-width="40"
      :config="{
        activeColor: '#FF4D40', 
        underLineColor: '#FF4D40'
      }"
      @change="onChange">
        <tab title="全部">
            <view class="list mt20">
                <view v-for="(item, index) in lists" :key="index" class="item">
                    <view class="bill-list bg-white">
                        <view class="bill-item">
							<view class="row-between">
								<view>
									<view class="black mb10">{{item.source_type}}</view>
									<view class="xs muted">{{item.create_time}}</view>
								</view>
								<view :class="'lg ' + (item.change_type == 1 ? 'income' : '')">{{item.change_amount}}</view>
							</view>
							<template v-if="item.remark">
								<view class="xs ornament">{{ item.remark }}</view>
							</template>
                        </view>
                    </view>
                </view>
            </view>
            <loading-footer :status="loadingStatus" slotEmpty>
                <view class="data-null column-center" slot="empty">
                    <image class="img-null" src="/static/images/order_null.png" />
                    <text class="nr muted">暂无记录～</text>
                </view>
            </loading-footer>
        </tab>
        <tab title="支出">
            <view class="list mt20">
                <view v-for="(item, index) in lists" :key="index" class="item">
                    <view class="bill-list bg-white">
                        <view class="bill-item">
							<view class="row-between">
								<view>
									<view class="black mb10">{{item.source_type}}</view>
									<view class="xs muted">{{item.create_time}}</view>
								</view>
								<view class="lg">{{item.change_amount}}</view>								
							</view>
							
							<template v-if="item.remark">
								<view class="xs ornament">{{ item.remark }}</view>
							</template>
                        </view>
                    </view>
                </view>
            </view>
            <loading-footer :status="loadingStatus" slotEmpty>
                <view class="data-null column-center" slot="empty">
                    <image class="img-null" src="/static/images/order_null.png" />
                    <text class="nr muted">暂无支出记录～</text>
                </view>
            </loading-footer>
        </tab>
        <tab title="收入">
            <view class="list mt20">
                <view v-for="(item, index) in lists" :key="index" class="item">
                    <view class="bill-list bg-white">
                        <view class="bill-item">
							<view class="row-between">
								<view>
									<view class="black mb10">{{item.source_type}}</view>
									<view class="xs muted">{{item.create_time}}</view>
								</view>
								<view class="lg income">{{item.change_amount}}</view>								
							</view>

							<template v-if="item.remark">
								<view class="xs ornament">{{ item.remark }}</view>
							</template>
                        </view>
                    </view>
                </view>
            </view>
            <loading-footer :status="loadingStatus" slotEmpty>
                <view class="data-null column-center" slot="empty">
                    <image class="img-null" src="/static/images/order_null.png"></image>
                    <text class="nr muted">暂无收入记录～</text>
                </view>
            </loading-footer>
        </tab> -->
    </tabs>
</view>
</template>

<script>

import { getAccountLog } from "@/api/user";
import { loadingType } from "@/utils/type";
import {loadingFun} from "@/utils/tools"
export default {
  data() {
    return {
      active: 0,
      lists: [],
      page: 1,
      loadingStatus: loadingType.LOADING
    };
  },

  components: {
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      console.log(options.type, "option.type")
    this.active = parseInt(options.type);

    this.getAccountLogFun(this.active);
  },

  
  onReachBottom: function () {
    this.getAccountLogFun(this.active);
  },

  methods: {
    onChange(e) {
      this.active = e;
      this.cleanStatus();
      this.getAccountLogFun(e);
    },

    cleanStatus() {
      // 清理状态
      this.page = 1;
      this.lists = [];
      this.loadingStatus = loadingType.LOADING
    },

    getAccountLogFun(type) {
      let changeType = 0;
      changeType = type == 0 ? 0 : type == 1 ? 2 : 1;
      let {
        lists,
        loadingStatus,
        page
      } = this;
      loadingFun(getAccountLog, page, lists, loadingStatus, { source: 1, type: changeType}).then(res => {
          if(res) {
              this.page = res.page;
              this.lists = res.dataList
              this.loadingStatus = res.status
          }
      })
    }

  }
};
</script>
<style lang="scss">
/* pages/user_bill/user_bill.wxss */
// .user-bill {
//     .list {
//         .item {
//             .time{
//                 padding: 30rpx;
//             }
//             .bill-list {
//                 .bill-item {
//                     padding: 20rpx 30rpx;
//                     border-bottom: $-solid-border;
//                     .income {
//                         color: $-color-primary;
//                     }
//                 }
//             }
//         }
//     }
// }

// .order-null {
//     padding-top: 200rpx;
// }

.data-null {
    padding-top: 150rpx;
}
.item1{
	width: 90%;
	padding: 30rpx 20rpx;
	margin: 20rpx 0;
	margin-left: 5%;
	// height: 156rpx;
	background: #FFFFFF;
	border-radius: 11rpx 11rpx 11rpx 11rpx;
	opacity: 1;
}
.leftTitle{
	font-size: 31rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	color: #000000;
}
.rightTitle{
	font-size: 31rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	color: $base-color;
}
.leftTitle1{
	margin-top: 20rpx;
	font-size: 27rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	color: #999999;
}
.rightTitle1{
	margin-top: 20rpx;
	font-size: 27rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	color: #65BEFF;
}
</style>